<template>
  <div class="screen-fixed-box">
    <div class="nav-box cenCen">
      <!-- https://gw.alicdn.com/tfs/TB1BhwLX7xz61VjSZFtXXaDSVXa-200-200.png  搜索 -->
      <div @click="thisNav=1;surePage('/mine');" class="nav">
        <div :style="[{color:thisNav==1?$store.state.themeColor:'#fff'}]" class="nav-img">
          <!-- <img v-if="thisNav==1" src="https://gw.alicdn.com/tfs/TB1Wv4.bxv1gK0jSZFFXXb0sXXa-200-200.png">
          <img v-else src="https://gw.alicdn.com/tfs/TB1nQg0bkWE3KVjSZSyXXXocXXa-200-200.png"> -->
          <i class="iconfont nf_icon_menpiao1"></i>
        </div>
        <div :style="[{color:thisNav==1?$store.state.themeColor:'#fff'}]" class="nav-tit">我的门票</div>
      </div>
      <div @click="thisNav=2;surePage('/mine/groupBuyingCode')" class="nav">
        <div :style="[{color:thisNav==2?$store.state.themeColor:'#fff'}]" class="nav-img">
          <!-- <img v-if="thisNav==2" src="https://gw.alicdn.com/tfs/TB1uDV_bET1gK0jSZFrXXcNCXXa-200-200.png">
          <img v-else src=" https://gw.alicdn.com/tfs/TB1mnM7ba1s3KVjSZFAXXX_ZXXa-200-200.png"> -->
          <i class="iconfont nf_icon_tuangou"></i>
        </div>
        <div :style="[{color:thisNav==2?$store.state.themeColor:'#fff'}]" class="nav-tit">团购管理</div>
      </div>
      <div @click="thisNav=3;surePage('/mine/profile')" class="nav">
        <div :style="[{color:thisNav==3?$store.state.themeColor:'#fff'}]" class="nav-img">
          <!-- <img v-if="thisNav==3" src="https://gw.alicdn.com/tfs/TB1XZN_bxD1gK0jSZFsXXbldVXa-200-200.png">
          <img v-else src="https://gw.alicdn.com/tfs/TB1mhU5blKw3KVjSZTEXXcuRpXa-200-200.png"> -->
          <i class="iconfont nf_icon_gerenzhongxin"></i>
        </div>
        <div :style="[{color:thisNav==3?$store.state.themeColor:'#fff'}]" class="nav-tit">个人中心</div>
      </div>
    </div>

    <co-dialog :open="faceAlert" class="ticket-auth-dialog-wrapper" dialog-class="ticket-auth-dialog">
      <div class="ticket-auth-dialog-header">
        <h3 class="ticket-auth-dialog-title">人脸快速入场</h3>
        <!-- <co-icon-close class="ticket-auth-dialog-close" @click="faceAlert=false" /> -->
        <img src="https://gw.alicdn.com/tfs/TB1qKkQHirpK1RjSZFhXXXSdXXa-698-696.png" class="ticket-auth-avatar">
      </div>
      <div class="ticket-auth-dialog-content">
        <p style="text-align: center;font-weight: bold;padding: 6px 0px;">授权提示</p>
        <p>阿里巴巴ONE商业大会采用人脸识别入场，基于为您提供服务的需要，请您确认：</p>
        <p style=" font-weight: bold;">
          我同意阿里云计算有限公司采集本人人脸数据并用于大会入场识别。
          <!-- <span style=" font-weight: bold;">我同意阿里云计算有限公司采集本人人脸数据并用于本人云栖大会入场识别，</span><span>同时，我同意阿里云计算有限公司向</span><span style=" font-weight: bold;">经我同意扫码或扫脸的云栖大会专场会议举办方、展台方</span><span>分享购票/报名所填写/提交的我的</span><span style=" font-weight: bold;">姓名、手机号码、电子邮箱、工作单位、职务信息，</span><span>用于向我</span><span style=" font-weight: bold;">发送或推荐专场会议举办方、展台方的服务/产品信息、或就参会事宜与我联系。</span> -->
        </p>
        <!-- <p class="argeement-desc">我已授权并同意 <a target="_blank" @click="openPage(item.agreementId)" v-for="(item,index) of agreement" :key="index">《{{item.title}}》</a></p> -->
      </div>
      <div class="ticket-auth-dialog-action" @click="photoUp()">同意并继续</div>
    </co-dialog>

  </div>
</template>
<script>
  import ddApi from "./ddApi";
  import service from "@/api/mine";
  import buyTicketService from "@/api/buyTicketService.js";
  export default {
    data() {
      return {
        findPhotoStatusNum: 0, //露脸状态查询次数
        corpIdIsNeedFace: [
          "ding4b14d8abe13d9afa35c2f4657eb6378f", //云栖大会
          "ding6deeb99d5d16aed435c2f4657eb6378f", //ISV授权组织
          "ding71136944afa5b0aa35c2f4657eb6378f" //one大会
        ], //根据组织id 判断当前组织是否需要露脸
        agreement: [], //协议列表
        activityId: "", //活动ID
        faceAlert: false, //录脸弹框
        thisNav: 1 //当前导航
      };
    },
    created() {
      this.initFun();
    },
    methods: {
      async initFun() {
        // this.$store.state.buyTicket.isBaseNeeddFaceShow = false; //默认不展示
        const isLow = await ddApi.watchDDFersion();
        let zhuansongList = ["15972961091", "1036124317687426", "18621532154"];
        if (
          isLow &&
          zhuansongList.indexOf(sessionStorage.getItem("zhuansong")) == -1
        ) {
          this.$toast("当前钉钉版本过低，请下载最新版本");
          setTimeout(() => {
            ddApi.openLink("https://www.dingtalk.com/download");
          }, 3000);
        }
        //确定页面当前导航
        const path = this.$route.path;
        if (path == "/mine") {
          this.thisNav = 1;
        } else if (path == "/mine/groupBuyingCode") {
          this.thisNav = 2;
        } else if (path == "/mine/profile") {
          this.thisNav = 3;
        } else {
          this.thisNav = 1;
          this.surePage("/mine");
        }

        // 获取存储活动ID
        // this.activityId = 23; //写死测试
        // sessionStorage.setItem("isNeedFace", "true"); //测试
        // sessionStorage.setItem("activityId", 44); //
        this.activityId = this.getUrl("activityId");
        if (this.activityId) {
          sessionStorage.setItem("activityId", this.activityId);
        }

        const corpId = sessionStorage.getItem("corpId");
        console.log("corpId", corpId);
        // 是否要根据录脸情况展示详情
        // if (this.corpIdIsNeedFace.indexOf(corpId) == -1) {
        //   // 其他组织展示不需要判断
        //   // this.$store.state.buyTicket.isBaseNeeddFaceShow = true;
        // }
        // 被移植到门票详情里面
        // if (
        //   this.corpIdIsNeedFace.indexOf(corpId) != -1 &&
        //   sessionStorage.getItem("isNeedFace") != "false" &&
        //   this.activityId
        // ) {
        //   // 1 需要露脸的组织，2 当前人是否需要露脸
        //   this.getFaceInfo();
        // }
      },

      // 初始化方法
      async getFaceInfo() {
        //掉接口判断是否需要露脸
        const { data } = await service.getPhotoStatus(
          `activityId=${this.activityId}`
        );

        let isNeedFace = false; //是否需要录脸默认需要
        // alert(`review=${data.review}`);
        // alert(
        //   data.review === false ? "review完全是false" : "review不完全是false"
        // );
        if (data.review === false) {
          // hasEnterFace  //是否已经录入
          // review 是否已经审核通过
          isNeedFace = true;
          // this.$store.state.buyTicket.isBaseNeeddFaceShow = true;
          // 上面不掉接口时候要判断
          // 下面成功以后要判断
        }
        if (isNeedFace && this.activityId) {
          this.faceAlert = true;
          // 查询当前活动的露脸协议付费的，但是列表上有免费和付费协议
          // const { data = [] } = await service.queryTempletByActivityId({
          //   activityId: this.activityId,
          //   isPay: "pay"
          // });
          // this.agreement = [];
          // for (let i = 0; i < data.agreeList.length; i++) {
          //   //1 购票协议 2 登录协议 3 露脸协议
          //   if (data.agreeList[i].typeId == 3) {
          //     this.agreement.push(data.agreeList[i]);
          //   }
          // }
        } else {
          localStorage.setItem("isNeedFace", "false");
        }
      },
      // 查询露脸状态
      async findPhotoStatus() {
        if (this.findPhotoStatusNum >= 2) {
          return;
        }
        //掉接口判断是否需要露脸
        this.findPhotoStatusNum++;
        const { data } = await service.getPhotoStatus(
          `activityId=${this.activityId}`
        );
        if (data.review !== false) {
          this.$toast("人脸审核通过");
          return;
        } else {
          setTimeout(() => {
            // alert("2.5秒查询露脸状态");
            this.findPhotoStatus();
          }, 2500);
        }
      },
      // 获取url参数
      getUrl(parameter) {
        return (
          decodeURIComponent(
            (new RegExp("[?|&]" + parameter + "=" + "([^&;]+?)(&|#|;|$)").exec(
              location.href
            ) || [, ""])[1].replace(/\+/g, "%20")
          ) || ""
        );
      },
      // 获取新的协议页面
      openPage(agreementId) {
        buyTicketService.lookAgreement(agreementId).then(res => {
          if (res.success) {
            ddApi.openLink(res.result);
          }
        });
      },
      // 确定当前页面
      surePage(path) {
        this.$router.replace(path);
      },
      // checkFaceAuth() {
      //   return services
      //     .isNeedUploadFace(this.activityId)
      //     .then(async ({ hasEnterFace, review }) => {
      //       this.faceAuthed = hasEnterFace && review;
      //       if (!hasEnterFace) {
      //         this.open = true;
      //       } else if (!review) {
      //         const result = await this.$confirm(
      //           "很抱歉！您录入的人脸信息审核失败了。请重新录入您的人脸信息，以免影响您使用人脸快速入场通道",
      //           {
      //             title: "人脸信息审核失败",
      //             okLabel: "重新录入",
      //             cancelLabel: "放弃",
      //             showCancel: true
      //           }
      //         );
      //         this.open = result;
      //       }
      //     });
      // },
      // 拍照上传
      async photoUp() {
        let res = await ddApi.uploadImageFromCamera();
        if (!res) {
          this.$toast("拍照失败");
          return;
        }
        this.$store.state.loading = true;
        const { success = false } = await service.enterFace({
          activityId: this.activityId,
          picUrl: res
        });
        this.$store.state.loading = false;
        if (success) {
          this.$toast("上传成功");
          // 认证成功以后赋值
          localStorage.setItem("isNeedFace", "false");
          this.faceAlert = false;
          setTimeout(() => {
            // alert("2.5秒查询露脸状态");
            this.findPhotoStatusNum = 0;
            this.findPhotoStatus();
          }, 2500);
        }
      }
    }
  };
</script>

<style scoped>
  .nav-box {
    width: 100%;
    height: auto;
    background: rgb(49, 51, 57);
    z-index: 2;
    padding: 10px 0px;
    cursor: pointer;
  }
  .nav {
    width: 33.33333%;
    height: auto;
    text-align: center;
  }
  /* .nav-img {
    width: auto;
    height: auto;
    text-align: center;
    overflow: hidden;
  }
  .nav-img > img {
    width: 16%;
    height: auto;
    margin-left: 42%;
    margin-top: 10px;
    margin-bottom: 10px;
    float: left;
  } */
  .nav-img {
    width: 100%;
    height: 66px;
    text-align: center;
    /* border: 1px solid red; */
    position: relative;
  }
  .nav-img > i {
    font-size: 42px;
    position: absolute;
    left: 42%;
    top: 0%;
  }
  .nav-tit {
    width: 100%;
    height: auto;
    color: #fff;
    font-size: 26px;
    text-align: center;
  }
</style>
